A Better Way to Learn AngularJS

Introduction

Congratulations on taking the plunge!

This AngularJS course is built with the intent of exposing you to the best available resources on each Angular topic. Our desire is to present these topics richly, and from a variety of vantage points, in order to afford you a more complete perspective on them.

This course is accompanied by AngularJS Tutorial: Learn to Build Modern Web Apps with MEAN.

The learning curve of AngularJS can be described as a hockey stick. Getting started with apps featuring basic functionality is delightfully easy. However, building more complex apps often require understanding Angular’s inner workings. Failure to do so will cause development to become awkward and cumbersome.

With AngularJS, the “Ready, Fire, Aim” learning methodology of duct taping together a handful of tutorials and a cursory glance through the documentation will lead to confusion and frustration. This curriculum is designed to properly guide you through each of the key Angular concepts thoroughly with a broad exposure to high quality content. With your eventual mastery of AngularJS, you will be able to fluently and efficiently construct large-scale applications.

Prerequisites

• Moderate knowledge of HTML, CSS, and JavaScript
• Basic Model-View-Controller (MVC) concepts
• The Document Object Model (DOM)
• JavaScript functions, events, and error handling

Resources

Since AngularJS is still in its infancy relative to other JavaScript frameworks, the number of encyclopaedic resources on it is still insufficient. Therefore, the curriculum will employ a healthy number of excellent blogs in order to offer a more meaty perspective on respective topics.

• Required Resources
  • AngularJS - O’Reilly Media (available on Amazon)
  • John Lindquist’s egghead.io
  • AngularJS docs
• Supplemental Resources
  • Ben Nadel blog
  • OneHungryMind
  • year of moo
  • Bruno Scopelliti blog

Part 1. Kicking the Tires

AngularJS is not a library.

Rather, it is a JavaScript framework that embraces extending HTML into a more expressive and readable format. It allows you to decorate your HTML with special markup that synchronizes with your JavaScript leaving you to write your application logic instead of manually updating views. Whether you’re looking to augment existing JavaScript applications or harness the full power of the framework to create rich and interactive SPA’s, Angular can help you write cleaner and more efficient code.
Filling the Tank

We’ve found that the egghead.io videos are the best starting resource available, so every chapter will lead off with them. The transcribed screencasts and source code are provided along with the videos. We encourage you to follow along with them, as they make the video content much more readily digestible.

As good as the egghead videos are, they should serve only as an introductory resource. Excerpts from the O’Reilly AngularJS book and the angularjs.org documentation complement the videos as the broader and more thorough source, and should be treated as the main reference for the course.
Adjusting Your Mirrors

When descending upon an entirely new topic, it is important to frame the topic correctly before diving into the minutia.

Read the following two entries in the AngularJS guide docs, they will give you a good idea of what you’re about to get into. Don’t worry about picking up on every aspect of the topics they glaze over, all of these will be covered thoroughly in subsequent lessons.

AngularJS Overview

Introduction to AngularJS
Revving the Engine

Before we get on with it, we recommend this post:

Things I Wish I Were Told About Angular.js

It goes over a handful of topics that might be helpful in building the appropriate mental models while consuming the Angular curriculum. Some, probably most, of the terms will bounce right off you until you have gone through that section of the course, but it should provide valuable context when approaching a new topic.

Now it’s off to the races!

Part 2: Taking It for a Spin

One of the awesome things about AngularJS is its usability right out of the box. Very little information about how the framework operates is needed to get up and running with your first application. With that in mind, go ahead and tear through the first five egghead videos:

AngularJS - Binding

AngularJS - Controllers

AngularJS - The Dot

AngularJS - Sharing Data Between Controllers

AngularJS - Defining a Method on the Scope
Readings

We’re going to crack the cover of AngularJS for the first time.

Read all of Chapter 1. Introduction to Angular JS

Read from the beginning of Chapter 2. Anatomy of an AngularJS Application to the section “Templates and Data Binding”
AngularJS Documentation

The following set of guides will serve to reinforce many of the topics just covered, and explain some new ones in detail:

Bootstrap

Expressions

Forms

Data Binding In Angular

Part 3: Filters

Filters are a simple but powerful tool in Angular, used primarily to format expressions in bindings in views and templates.

These three egghead videos serve to cover the basics nicely:

AngularJS - Filters

AngularJS - ngFilter

AngularJS - Built-In Filters
Readings

In Chapter 2: “Anatomy of an AngularJS Application”, read the section “Formatting Data with Filters”
AngularJS Documentation

Finally, the Angular guides offer a bit more depth on filters:

Angular Filters

Part 4. Directives

Now you’re really getting into the meat of what makes Angular special. Directives are certainly one of the most important facets of the framework, and as such, this is one of the biggest sections of the course. The egghead videos do a superb job covering many of the features and use cases of directives:

AngularJS - First Directive

AngularJS - Directive Restrictions

AngularJS - Basic Behaviors

AngularJS - Useful Behaviors

AngularJS - Directives Talking to Controllers

AngularJS - Directive to Directive Communication

AngularJS - Transclusion Basics

AngularJS - Components and Containers

AngularJS - Directive Communication
Readings

There’s a lot to digest in those videos, the text will help to clarify:

Chapter 6: Directives - Read from the beginning of the chapter up to and including: In the section “API Overview”: Subsection, “Compile and Link Functions”

Also, in section “API Overview”: Read subsection “Controllers”
AngularJS Documentation

To wrap up, the Angular guides offer a bit more detail on the specifics of some aspects of directives:

HTML Compiler

Directives

Part 5: Scope

Interestingly, scopes are dramatically underrepresented in mainstream Angular resources compared to how important they are. A solid understanding of scope mechanics is essential when scaling applications, as well as writing modular and testable code. Fortunately, the egghead videos do it justice:

AngularJS - Understanding Isolate Scope

AngularJS - Isolate Scope “@”

AngularJS - Isolate Scope “=”

AngularJS - Isolate Scope “&”

AngularJS - Isolate Scope Review
Readings

Chapter 6: Directives - In the section “API Overview”: Read subsection “Scopes”
AngularJS Documentation

Finally, check out the Angular docs for an in-depth analysis:

Scopes

Part 6: Application Structure and Organization

At this point, it’s important you step back to rethink and examine Angular as a whole. It’s easy to mentally paint yourself into a corner when learning a new language or framework, and a great way to combat this is by exposing yourself to alternate ways of thinking, and viewing the bigger picture.

Watch these egghead videos to get started on thinking about alternative application structure:

An Alternative Approach to Controllers

Thinking Differently About Organization

Experimental “Controller as” Syntax
Readings

In Chapter 2. “Anatomy of an AngularJS Application”: Read the section “Organizing Dependencies with Modules”
AngularJS Documentation

Read the AngularJS page on Modules

Part 7: The View and the DOM

This section is a bit of a hybrid of seemingly unrelated topics, DOM manipulation, $watch, and view services, but they are closely related, as they all live in close proximity around the application’s views in implementation.

The egghead videos do a superb job of tying these topics together:

AngularJS - angular.element

AngularJS - $index, $event, $log
Readings

These book sections will give additional depth on these subjects:

In Chapter 2. “Anatomy of an AngularJS Application”: in section “Templates and Data Binding”: Read “Observing Model Changes with $watch”

In Chapter 2. “Anatomy of an AngularJS Application”: in section “Templates and Data Binding”: Read “Performance Considerations in $watch”

In Chapter 2. “Anatomy of an AngularJS Application”: Read section “Changing the DOM with Directives”

In Chapter 6. “Directives”: In the section “API Overview”: Read subsection “Manipulating DOM Elements”

Additionally, we’ve put together a section that goes into further detail on DOM manipulation:

Read jqLite, angular.element, and the DOM
AngularJS Documentation

Working with CSS in Angular

Part 8: Templates

Despite this being a short section, understanding Angular templates is critical to being able to build applications effectively.

This handful of egghead videos is an excellent primer on the subject:

templateUrl

$templateCache
Readings

The AngularJS book has a terrific and comprehensive section detailing templates:

In Chapter 6. “Directives”: in the section “API Overview”: Read subsection “The Directive Definition Object”
AngularJS Documentation

The documentation guide also has a quick but quality piece on Angular templates:

Angular Templates

Part 9: Routing

Angular routing, while not unduly complicated, does introduce a large number of concepts all at once. It also will handle the lion’s share (or close to it) of logic for many single page applications. It should then be no surprise that this is the largest section of the course.

The egghead videos appropriately devote a great deal of podium time to routing:

AngularJS - ng-view

AngularJS - The config function

AngularJS - $routeProvider api

AngularJS - $routeParams

AngularJS - redirectTo

AngularJS - Promises

AngularJS - Resolve

AngularJS - Resolve conventions

AngularJS - Resolve $routeChangeError

AngularJS - Directive for Route Handling

AngularJS - Route Life Cycle
Readings

Some of the concepts introduced here are probably still fuzzy, and the text does an excellent job of clearing them up:

In Chapter 2. “Anatomy of an AngularJS Application”: Read the section “Changing Views with Routes and $location”

In Chapter 5. “Communicating with Servers”: Read the section “The $q and the Promise”

In Chapter 5. “Communicating with Servers”: Read the section “Response Interception”

In Chapter 7. “Other Concerns”: Read the section “$location”
AngularJS Documentation

Finally, the Angular docs have a great section on the $location service:

Using $location

Part 10: Examples and Analysis

At this point, most of the core Angular topics have been covered, and it’s appropriate to get into some examples.

egghead has a good, though fairly trivial, example, “Zippy”:

Building Zippy
Readings

Next, the O’Reilly text has a great, chapter-long example that is terrific to work through:

Read all of Chapter 4. “Analyzing an AngularJS App”
AngularJS Documentation

Last, we recommend working through the AngularJS documentation tutorial. The format they present it in is a bit too hands-off to be exceedingly helpful, so we recommend playing around with it and modifying it to get the most out of the exercise.

AngularJS Tutorial

Part 11: Under the Hood

At this juncture, it’s appropriate to dive into the niceties of AngularJS. In order to truly master the framework, hand-wavy arguments for how things work aren’t sufficient anymore. You need to get into the nitty-gritty of what makes Angular tick.

These egghead videos offer an excellent primer for some increasingly advanced topics:

$scope vs. scope

Providers

Injectors

ngmin
Readings

Following this, the book has a handful of sections detailing these and other new framework topics:

In Chapter 7. “Other Concerns”: in the section “AngularJS Module Methods”: Read the section “Communicating Between Scopes with $on, $emit, and $broadcast”

Additionally,

Read this in-depth analysis of $digest
AngularJS Documentation

Finally, there are a healthy number of Angular documentation guide pages that really get down into dissecting Angular. These are some of the best resources on Angular’s innards out there, make sure and fully take them in:

Conceptual Overview

Dependency Injection

Angular Services

Part 12: Development Environment and Testing

Much of Angular’s design is built around being highly testable. Central to this is the widespread utilization of dependency injection, which you read about in Chapter 11. Not only this, but with tools like Yeoman available, a robust test suite becomes realistic and manageable.

There is only one egghead video on testing, and it gives a simplistic overview of a unit test on a filter. (It’s worth mentioning that the Testacular test runner is now called ‘Karma’):

AngularJS - Testing Overview
Readings

We’d like to get a bit more in depth than that, so next read all of Ch.3 in O’Reilly. This chapter focuses on Yeoman, which is a set of productivity tools that make Angular a lot more digestible: Yo, a scaffolding tool, Grunt, the build and testing tool, and Bower, the package management tool.

Read Chapter 3: Developing in AngularJS
Meet the Gang

A person new to testing might be a little overwhelmed with these concepts and how they play together in the world of testing. This reference should help out:

• Yeoman has the scaffolding tool yo that generates an application skeleton to start out with, complete with things like Bootstrap or a pre-configured testing setup. The scaffold of the application is different in many ways to the angular-seed scaffold, but it is important to note that they both use Karma and Jasmine in the same ways.
• angular-seed is a ready-to-eat AngularJS scaffold available on their github with directory structure and testing amenities pre-prepared. Testing this application is accomplished by running a standalone Karma test server.
• Grunt is the testing tool used in Yeoman, but it is used as a wrapper for Karma.
• Karma is the actual test runner that is used to test AngularJS. It can be used standalone from Grunt. Karma circumvents testing inconsistencies across browsers, which would happen with things like PhantomJS, by actually launching a browser and running the tests in it.
• Jasmine is the testing framework which is used for unit tests by default in Karma. Angular E2E tests with Karma don’t and can’t use the Jasmine adapter, although E2E tests use very similar syntax with the Angular Scenario Runner. This blog post does a fine job of going through how to actually author some Jasmine tests, and gives some excellent examples.

AngularJS Documentation

Now that we have fleshed out how testing should generally go, let’s take a look at the Angular docs on testing. These are going to give some more information on how to think about Angular testing. While they are a good resource to have, regrettably, some of them are not yet complete.

Unit Testing

E2E Testing
More Readings and Examples

Now, read through How to Test an AngularJS Directive. This blog post goes through setting up Yeoman, generating a very simple sample application, writing tests for a directive, and running tests using Karma.

Finally, go through one of the better Angular testing resources to date, Full-Spectrum Testing with AngularJS and Karma. This is an outstanding resource that has fantastic explanations and demonstrations of testing with Grunt and Karma. Included are examples for each of the major testing categories in Angular. It also adds the intermediate Midway test paradigm to the fray, which is a compelling convenience if you’re trying to streamline authoring tests.

Part 13. $http and Server Interaction

$http

In the face of a slew of new concepts, it’s important to not overthink the $http service.

$http can be thought of as a wrapper to make requests to external HTTP entities with the browser’s XHR object or JSONP. Because of the nature of these requests, it employs callbacks afforded to it by the $q defer/promise API.

More generally, $http is used predominantly for AJAX requests. Its API exists as you would expect, with the ability to make GET, POST, PUT, DELETE, HEAD, and JSONP requests. You are responsible for making these calls manually, and for constructing how to handle the objects they return, and the callbacks for various outcomes that might occur with an asynchronous request.
$resource

AngularJS offers another level abstractions above $http, the $resource service. This is a convenience offered to you when dealing with external resources that are RESTful. It wraps the $http service, which is pointed at a singular endpoint, and presents a REST API on the $resource to handle RESTful requests. The $resource get() method returns a Resource object, which can then be modified with CRUD (or custom defined) operations invoked upon it.
Authentication

Since services are singletons, and can be injected pretty much anywhere, they are perfect for use in authentication logic. There is a diverse spectrum of implementations on how exactly to construct the service, but they are all variations on basically the same theme.

myApp.factory('AuthenticationService', function() {
  var current_user;
  return {
    signIn: function() {
      // check password on server, get user data, unique token, etc.
    },
    signOut: function() {
      // clear current_user data, unset logged in status, etc.
    },
    isSignedIn: function() {
      // logic to check if current user has signed in
    },
    currentUser: function() {
      // return the current_user object, or handle if the user is not signed in
    }
  };
});

Since it is a service, you can inject this to your heart’s desire, set watchers on its methods, use the user data in views, handle routing conditionals based on signin status, etc. Since all this data is still just freely living in the AngularJS framework, you still need to exercise the same security precautions when performing server transactions involving authentication.

Read this blog entry, Deal with users authentication in an AngularJS web app. It offers excellent insight into service-based Angular authentication.
Readings

The text offers a wealth of information on interacting with servers:

In Chapter 2. “Anatomy of an AngularJS Application”: in the section “Changing Views with Routes and $location”: Read the subsection “Talking to Servers”

Read all of Chapter 5. “Communicating with Servers”

In Chapter 8. “Cheatsheet and Recipes”: Read the section “Working with Servers and Login”
AngularJS Documentation

Finally, check out the Angular API docs on $http and $resource:

The $http service

The $resource service

上一篇：Python and Flask Are Ridiculously Powerful

下一篇：AngularJS相关工具